/**
 * Created by Administrator on 2017/11/3 0003.
 * uiSet.js 主要控制page页面中搜索栏的展开收缩与监听浏览器大小
 * 此种方式侵入性较强（若page页封装成组件会存在其它问题：1、组件间数据共享复杂化 2、el-table组件高度无法友好处理 3、自适应处理复杂化）
 */
var uiSet = {
  data () {
    return {
      isCollapseActive: true,
      tableHeight: 0 // el-table 中需对应此参数
    };
  },
  methods: {
    collapseWrap () {
      this.isCollapseActive = !this.isCollapseActive;
      const that = this;
      setTimeout(function () {
        that.layout();
      }, 500);
    },
    // 监听浏览器大小
    watchPageSize () {
      var _this = this;
      window.onresize = function () {
        if (_this.$refs.zSearchSpace) {
          _this.layout();
        }
      };
    },
    // 重绘页面布局      //重绘时，发现获取浏览器窗体高度有误，所以进行重新修改方法
    layout () {
      const zPageH = this.$refs.zPage ? this.$refs.zPage.offsetHeight : 0;
      const zSearchH = this.$refs.zSearchSpace ? this.$refs.zSearchSpace.offsetHeight : 0;
      const zTableHeaderH = 0;
      const zTableFooterH = 0;
      this.tableHeight = zPageH - zSearchH - zTableHeaderH - zTableFooterH - 20 - 1;
    }
  },
  // 组件渲染完成，重绘布局并监听page
  mounted () {
    if (!this.$refs.zPage) {
      return;
    }
    if (this.$refs.zSearchSpace) {
      const that = this;
      setTimeout(function () {
        that.layout();
        that.watchPageSize();
      }, 500);
    }
  },
  // 切换tab 重绘布局
  activated () {
    if (!this.$refs.zPage) {
      return;
    }
    if (this.$refs.zSearchSpace) {
      this.layout();
      this.watchPageSize();
    }
  },
  watch: {
    tableHeight (val) {
    }
  }
};
export default uiSet;
